<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="标识信息表" name="bsxxb">

      <div id="base_info" class="base_info">
        <el-scrollbar style="height:100%;">
          <el-container class="elementDetail">
            <table>
              <tr>
                <th>参数</th>
                <th>值</th>
              </tr>
              <tr>
                <td>物质编码</td>
                <td>{{ element.baseinfoWzbm }}</td>
              </tr>
              <tr>
                <td>物质类型</td>
                <td>{{ element.baseinfoType }}</td>
              </tr>
              <tr>
                <td>中文名称</td>
                <!-- <td>{{element.chineseName}}</td>
               -->
                <td>{{ element.baseinfoZwmc }}</td>
              </tr>
              <tr>
                <td>中文其他名称</td>
                <td>{{ element.baseinfoZwqtmc }}</td>
              </tr>
              <tr>
                <td>英文名称</td>
                <td>{{ element.baseinfoYwmc }}</td>
              </tr>
              <tr>
                <td>英文其他名称</td>
                <td>{{ element.baseinfoYwqtmc }}</td>
              </tr>
              <tr>
                <td>IUPAC名称</td>
                <td>{{ element.baseinfoIupac }}</td>
              </tr>
              <tr>
                <td>CAS编码</td>
                <td>{{ element.baseinfoCas }}</td>
              </tr>
              <tr>
                <td>SMILE码</td>
                <td>{{ element.baseinfoSmiles }}</td>
              </tr>
              <tr>
                <td>分子式</td>
                <td>{{ element.baseinfoFzs }}</td>
              </tr>
              <tr>
                <td>相对分子质量</td>
                <td>{{ element.baseinfo_xdfzzl }}</td>
              </tr>
              <tr>
                <td>结构式</td>
                <td><img :src="this.element.picBase64"></td>
              </tr>
            </table>
          </el-container>
        </el-scrollbar>
      </div>
    </el-tab-pane>
    <el-tab-pane label="理化属性表" name="lhsxb">

      <div id="pc_properties" class="pc_properties">
        <el-scrollbar style="height:100%;">
          <el-container style="height:500px">
            <table>
              <tr>
                <th>参数</th>
                <th>值</th>

              </tr>

              <tr>
                <td>基本性状</td>
                <td>{{ element.lhsxbJbxzKeyValue }}</td>
              </tr>
              <tr>
                <td>沸点</td>
                <td>{{ element.lhsxbFd }}</td>
              </tr>
              <tr>
                <td>水溶解度</td>
                <td>{{ element.lhsxbSrjd }}</td>
              </tr>

              <tr>
                <td>饱和蒸气压</td>
                <td>{{ element.lhsxbBhzqy }}</td>
              </tr>

              <tr>
                <td>熔点</td>
                <td>{{ element.lhsxbFdKeyValue }}</td>
              </tr>

              <tr>
                <td>相对密度</td>
                <td>{{ element.lhsxbXdmd }}</td>
              </tr>

              <tr>
                <td>闪点</td>
                <td>{{ element.lhsxbSd }}</td>
              </tr>

              <tr>
                <td>亨利常数</td>
                <td>{{ element.lhsxbHlcs }}</td>

              </tr>

              <tr>
                <td>Kow对数值</td>
                <td>{{ element.lhsxbKowdsz }}</td>

              </tr>

              <tr>
                <td>Kow备注</td>
                <td>{{ element.lhsxbKowbz }}</td>

              </tr>
              <tr>
                <td>Koc值</td>
                <td>{{ element.lhsxbFdKeyValue }}</td>

              </tr>

              <tr>
                <td>解离常数pKa</td>
                <td>{{ element.lhsxbJlcspka }}</td>

              </tr>
              <tr>
                <td>燃烧性</td>
                <td>{{ element.lhsxbFdKeyValue }}</td>
              </tr>
              <tr>
                <td>氧化性</td>
                <td>{{ element.lhsxbYhx }}</td>
              </tr>
              <tr>
                <td>爆炸性</td>
                <td>{{ element.lhsxbBzx }}</td>
              </tr>
              <tr>
                <td>表面张力</td>
                <td>{{ element.lhsxbBmzl }}</td>

              </tr>
              <tr>
                <td>pH</td>
                <td>{{ element.lhsxbPh }}</td>

              </tr>

              <tr>
                <td>基本性状</td>
                <td>{{ element.lhsxbJbxzKeyValue }}</td>
              </tr>

            </table>
          </el-container>
        </el-scrollbar>

      </div>

    </el-tab-pane>
    <el-tab-pane label="环境行为表" name="hjxw">
      <div id="en_behavior" class="en_behavior">
        <el-scrollbar style="height:100%;">
          <el-container class="elementDetail">
            <table>
              <tr>
                <th>参数</th>
                <th>值</th>

              </tr>

              <tr>
                <td>环境行为概述</td>
                <td>{{ element.hjxwbHjxwgs }}</td>

              </tr>
              <tr>
                <td>生物降解半衰期（淡水）</td>
                <td>{{ element.hjxwbSwjjbsqDs }}</td>

              </tr>
              <tr>
                <td>生物降解半衰期（淡水沉积物）</td>
                <td>{{ element.hjxwbSwjjbsqDscjw }}</td>

              </tr>
              <tr>
                <td>生物降解半衰期（海水）</td>
                <td>{{ element.hjxwbSwjjbsqHs }}</td>

              </tr>
              <tr>
                <td>生物降解半衰期（海洋沉积物）</td>
                <td>{{ element.hjxwbSwjjbsqHycjw }}</td>

              </tr>
              <tr>
                <td>生物降解半衰期（土壤）</td>
                <td>{{ element.hjxwbSwjjbsqTr }}</td>

              </tr>
              <tr>
                <td>生物降解试验终点</td>
                <td>{{ element.hjxwbSwjjsyzd }}</td>

              </tr>
              <tr>
                <td>生物降解试验终点值</td>
                <td>{{ element.hjxwbSwjjsyzdz }}</td>

              </tr>
              <tr>
                <td>生物降解试验时间</td>
                <td>{{ element.hjxwbSwjjsysj }}</td>

              </tr>
              <tr>
                <td>生物降解试验方法</td>
                <td>{{ element.hjxwbSwjjsyff }}</td>

              </tr>
              <tr>
                <td>生物降解备注</td>
                <td>{{ element.hjxwbSwjjbz }}</td>

              </tr>
              <tr>
                <td>光解半衰期（水）</td>
                <td>{{ element.hjxwbGjbsqS }}</td>

              </tr>

              <tr>
                <td>光解半衰期（大气）</td>
                <td>{{ element.hjxwbGjbsqDq }}</td>

              </tr>

              <tr>
                <td>光解半衰期（土壤）</td>
                <td>{{ element.hjxwbGjbsqTr }}</td>

              </tr>

              <tr>
                <td>水解半衰期（淡水）</td>
                <td>{{ element.hjxwbSjbsqDs }}</td>
              </tr>

              <tr>
                <td>水解半衰期（海水）</td>
                <td>{{ element.hjxwbSjbsqHs }}</td>

              </tr>

              <tr>
                <td>其他降解性说明</td>
                <td>{{ element.hjxwbQtjjxsm }}</td>

              </tr>
              <tr>
                <td>BCF值（水生）</td>
                <td>{{ element.hjxwbBcfz }}</td>
              </tr>
              <tr>
                <td>BCF值（陆生）</td>
                <td>{{ element.hjxwBcfLsKeyValue }}</td>
              </tr>
              <tr>
                <td>BMF值</td>
                <td>{{ element.hjxwbBmf }}</td>

              </tr>
              <tr>
                <td>TMF值</td>
                <td>{{ element.hjxwbTmf }}</td>

              </tr>
              <tr>
                <td>BSAF值</td>
                <td>{{ element.hjxwbBsaf }}</td>

              </tr>
              <tr>
                <td>生物累积性备注</td>
                <td>{{ element.hjxwbSwljxbz }}</td>

              </tr>
              <tr>
                <td>其他环境行为信息</td>
                <td>{{ element.hjxwbQthjxwxx }}</td>

              </tr>

            </table>

          </el-container>
        </el-scrollbar>
      </div>
    </el-tab-pane>
    <el-tab-pane label="生态危害表" name="stwhb">
      <div id="ectox" class="ectox">
        <el-scrollbar style="height:100%;">
          <el-container class="elementDetail">
            <table>
              <tr>
                <th>参数</th>
                <th>值</th>
              </tr>

              <tr>
                <td>环境危害分类</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>生态毒性描述</td>
                <td>{{ element.stwhbStdxms }}</td>
              </tr>
              <tr>
                <td>鱼类急毒LC50</td>
                <td>{{ element.stwhbYljdlc50 }}</td>
              </tr>
              <tr>
                <td>鱼类急毒试验时间</td>
                <td>{{ element.stwhbYljdsysj }}</td>
              </tr>
              <tr>
                <td>鱼类急毒试验方法</td>
                <td>{{ element.stwhbYljdsyff }}</td>
              </tr>
              <tr>
                <td>鱼类急毒试验种属</td>
                <td>{{ element.stwhbYljdsyzs }}</td>
              </tr>
              <tr>
                <td>鱼类急毒备注</td>
                <td>{{ element.stwhbYljdbz }}</td>
              </tr>
              <tr>
                <td>鱼类慢毒NOEC</td>
                <td>{{ element.stwhbYlmdnoec }}</td>
              </tr>
              <tr>
                <td>鱼类慢毒LOEC</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>鱼类慢毒LC10</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>鱼类慢毒效应说明</td>
                <td>{{ element.stwhbYlmdxysm }}</td>
              </tr>
              <tr>
                <td>鱼类慢毒试验时间</td>
                <td>{{ element.stwhbYlmdsysj }}</td>
              </tr>
              <tr>
                <td>鱼类慢毒试验方法</td>
                <td>{{ element.stwhbYlmdsyff }}</td>
              </tr>
              <tr>
                <td>鱼类慢毒试验种属</td>
                <td>{{ element.stwhbYlmdsyzs }}</td>
              </tr>
              <tr>
                <td>鱼类慢毒备注</td>
                <td>{{ element.stwhbYlmdbz }}</td>
              </tr>
              <tr>
                <td>鱼类总体毒性备注</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>水生无脊椎生物急毒EC50</td>
                <td>{{ element.stwhbSswjzswjdec50 }}</td>
              </tr>
              <tr>
                <td>水生无脊椎生物急毒试验时间</td>
                <td>{{ element.stwhbSswjzswjdsysj }}</td>
              </tr>
              <tr>
                <td>水生无脊椎生物急毒试验方法</td>
                <td>{{ element.stwhbSswjzswjdsyff }}</td>
              </tr>
              <tr>
                <td>水生无脊椎生物急毒试验种属</td>
                <td>{{ element.stwhbSswjzswjdsyzs }}</td>
              </tr>
              <tr>
                <td>水生无脊椎生物急毒备注</td>
                <td>{{ element.stwhbSswjzswjdbz }}</td>
              </tr>
              <tr>
                <td>水生无脊椎生物慢毒NOEC</td>
                <td>{{ element.stwhbSswjzswmdnoec }}</td>
              </tr>
              <tr>
                <td>水生无脊椎生物慢毒LOEC</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>水生无脊椎生物慢毒LC10</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>水生无脊椎生物慢毒效应说明</td>
                <td>{{ element.stwhbSswjzswmdxysm }}</td>
              </tr>
              <tr>
                <td>水生无脊椎生物慢毒试验时间</td>
                <td>{{ element.stwhbSswjzswmdsysj }}</td>
              </tr>
              <tr>
                <td>水生无脊椎生物慢毒试验方法</td>
                <td>{{ element.stwhbSswjzswmdsyff }}</td>
              </tr>
              <tr>
                <td>水生无脊椎生物慢毒试验种属</td>
                <td>{{ element.stwhbSswjzswmdsyzs }}</td>
              </tr>
              <tr>
                <td>水生无脊椎生物慢毒备注</td>
                <td>{{ element.stwhbSswjzswmdbz }}</td>
              </tr>
              <tr>
                <td>水生无脊椎生物总体毒性备注</td>
                <td>{{ element.stwhbSswjzswztdxbz }}</td>
              </tr>
              <tr>
                <td>藻类急毒EC50（96h）</td>
                <td>{{ element.stwhbZljdec50 }}</td>
              </tr>
              <!-- <tr>
              <td>藻类急毒EC50（72h）</td>
              <td>{{element.hjxwGjbsqSoilKeyValue}}</td>
            </tr> -->
              <tr>
                <td>藻类急毒试验方法</td>
                <td>{{ element.stwhbZldxPrinciples }}</td>
              </tr>
              <tr>
                <td>藻类急毒试验种属</td>
                <td>{{ element.stwhbZldxSpecies }}</td>
              </tr>
              <tr>
                <td>藻类急毒备注</td>
                <td>{{ element.stwhbZldxExecutiveSummary }}</td>
              </tr>
              <tr>
                <td>藻类慢毒NOEC</td>
                <td>{{ element.stwhbZlmdnoec }}</td>
              </tr>
              <tr>
                <td>藻类慢毒LOEC</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <!-- <tr>
              <td>藻类慢毒EC10</td>
              <td>{{element.hjxwGjbsqSoilKeyValue}}</td>
            </tr> -->
              <tr>
                <td>藻类慢毒效应说明</td>
                <td>{{ element.stwhbZlmdxysm }}</td>
              </tr>
              <tr>
                <td>藻类慢毒试验时间</td>
                <td>{{ element.stwhbZlmdsysj }}</td>
              </tr>
              <tr>
                <td>藻类慢毒试验方法</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>藻类慢毒试验种属</td>
                <td>{{ element.stwhbZlmdsyzs }}</td>
              </tr>
              <tr>
                <td>藻类慢毒备注</td>
                <td>{{ element.stwhbZlmdbz }}</td>
              </tr>
              <tr>
                <td>藻类总体毒性备注</td>
                <td>{{ element.stwhbZldxExecutiveSummary }}</td>
              </tr>
              <tr>
                <td>水生植物急性毒性</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>水生植物慢性毒性</td>
                <td>{{ element.stwhbSszwmxdx }}</td>
              </tr>
              <tr>
                <td>水生微生物毒性</td>
                <td>{{ element.stwhbSswswdxKeyValue }}</td>
              </tr>
              <tr>
                <td>其他水生毒性</td>
                <td>{{ element.stwhbZljdec50Qt }}</td>
              </tr>
              <tr>
                <td>底栖生物毒性</td>
                <td>{{ element.stwhbDqswdx }}</td>
              </tr>
              <tr>
                <td>陆生节肢生物毒性</td>
                <td>{{ element.stwhbLsjzswdx }}</td>
              </tr>
              <tr>
                <td>陆生植物毒性</td>
                <td>{{ element.stwhbLszwdx }}</td>
              </tr>
              <tr>
                <td>陆生土壤生物毒性</td>
                <td>{{ element.stwhbLstrswdx }}</td>
              </tr>
              <tr>
                <td>陆生土壤微生物毒性</td>
                <td>{{ element.stwhbLstrwswdx }}</td>
              </tr>
              <tr>
                <td>鸟类毒性</td>
                <td>{{ element.stwhbNldx }}</td>
              </tr>
              <tr>
                <td>其他陆生生物毒性</td>
                <td>{{ element.stwhbQtlsswdx }}</td>
              </tr>
              <tr>
                <td>其他生态毒性</td>
                <td>{{ element.stwhbQtssdx }}</td>
              </tr>

            </table>
          </el-container>
        </el-scrollbar>
      </div>
    </el-tab-pane>
    <el-tab-pane label="健康危害表" name="jkwhb">
      <div id="mamm_toxicity" class="mamm_toxicity">

        <el-scrollbar style="height:100%;">
          <el-container class="elementDetail">
            <table>
              <tr>
                <th>参数</th>
                <th>值</th>
              </tr>
              <tr>
                <td>经口急毒LD50</td>
                <td>{{ element.jkwhbJkjdld50 }}</td>
              </tr>

              <tr>
                <td>经口急毒试验物种</td>
                <td>{{ element.jkwhbJkjdsywz }}</td>
              </tr>
              <tr>
                <td>经口急毒暴露时间</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>经口急毒试验方法</td>
                <td>{{ element.jkwhbJkjdsyff }}</td>
              </tr>
              <tr>
                <td>经口急毒备注</td>
                <td>{{ element.jkwhbJkjdbz }}</td>
              </tr>
              <tr>
                <td>经皮急毒LD50</td>
                <td>{{ element.jkwhbJpjdld50 }}</td>
              </tr>

              <tr>
                <td>经皮急毒试验物种</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>经皮急毒暴露时间</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>经皮急毒试验方法</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>经皮急毒备注</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>吸入（气体）急毒LC50</td>
                <td>{{ element.jkwhbXrQtJdlc50 }}</td>
              </tr>

              <tr>
                <td>吸入（蒸气）急毒LC50</td>
                <td>{{ element.jkwhbXrZqJdlc50 }}</td>
              </tr>

              <tr>
                <td>吸入（粉尘）急毒LC50</td>
                <td>{{ element.jkwhbXrFcJdlc50 }}</td>
              </tr>

              <tr>
                <td>吸入急毒试验物种</td>
                <td>{{ element.jkwhbXrjdsywz }}</td>
              </tr>
              <tr>
                <td>吸入急毒暴露时间</td>
                <td>{{ element.jkwhbXrjdblsj }}</td>
              </tr>
              <tr>
                <td>吸入急毒试验方法</td>
                <td>{{ element.jkwhXrjdQualifier }}</td>
              </tr>
              <tr>
                <td>吸入急毒备注</td>
                <td>{{ element.jkwhbXrjdbz }}</td>
              </tr>
              <tr>
                <td>其他途径急毒</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>急性毒性备注</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>慢毒经口NOAEL</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>

              <tr>
                <td>慢毒经口LOAEL</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>慢毒经口试验物种</td>
                <td>{{ element.jkwhbMdjksywz }}</td>
              </tr>
              <tr>
                <td>慢毒经口暴露时间</td>
                <td>{{ element.jkwhbMdjkblsj }}</td>
              </tr>
              <tr>
                <td>慢毒经口试验方法</td>
                <td>{{ element.jkwhbMdjksyff }}</td>
              </tr>
              <tr>
                <td>慢毒经口效应</td>
                <td>{{ element.jkwhbMdjkxy }}</td>
              </tr>
              <tr>
                <td>慢毒经口备注</td>
                <td>{{ element.jkwhbMdjkbz }}</td>
              </tr>
              <tr>
                <td>慢毒吸入（气体）NOAEL</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>慢毒吸入试验物种</td>
                <td>{{ element.jkwhbMdxrsywz }}</td>

              </tr>
              <tr>
                <td>慢毒吸入暴露时间</td>
                <td>{{ element.jkwhbMdxrblsj }}</td>

              </tr>
              <tr>
                <td>慢毒吸入试验方法</td>
                <td>{{ element.jkwhbMdxrsyff }}</td>
              </tr>
              <tr>
                <td>慢毒吸入效应</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>慢毒吸入备注</td>
                <td>{{ element.jkwhbMdxrbz }}</td>
              </tr>
              <tr>
                <td>慢毒经皮NOAEL</td>
                <td>{{ element.jkwhbMdjpnoael }}</td>
              </tr>

              <tr>
                <td>慢毒经皮LOAEL</td>
                <td>{{ element.jkwhbMdjploael }}</td>
              </tr>

              <tr>
                <td>慢毒经皮试验物种</td>
                <td>{{ element.jkwhbMdjpsywz }}</td>
              </tr>
              <tr>
                <td>慢毒经皮暴露时间</td>
                <td>{{ element.jkwhbMdjpblsj }}</td>
              </tr>
              <tr>
                <td>慢毒经皮试验方法</td>
                <td>{{ element.jkwhbMdjpsyff }}</td>
              </tr>
              <tr>
                <td>慢毒经皮效应</td>
                <td>{{ element.jkwhbMdjpxy }}</td>
              </tr>
              <tr>
                <td>慢毒经皮备注</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>其他途径慢毒</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>慢性毒性备注</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>致癌性描述</td>
                <td>{{ element.jkwhbZaxms }}</td>
              </tr>
              <tr>
                <td>致癌性IARC分类</td>
                <td>{{ element.jkwhbZaxIarcfl }}</td>
              </tr>
              <tr>
                <td>RfC</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>RfD</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>经口SF</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>吸入IUR</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>饮用水因子</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>
              </tr>
              <tr>
                <td>致突变性描述</td>
                <td>{{ element.jkwhbZtbxms }}</td>
              </tr>
              <tr>
                <td>生殖毒性NOAEL</td>
                <td>{{ element.jkwhbSzdxnoael }}</td>

              </tr>
              <tr>
                <td>生殖毒性LOAEL</td>
                <td>{{ element.jkwhbSzdxloael }}</td>

              </tr>
              <tr>
                <td>生殖毒性试验物种</td>
                <td>{{ element.jkwhbSzdxsywz }}</td>

              </tr>
              <tr>
                <td>生殖毒性暴露途径</td>
                <td>{{ element.jkwhbSzdxbltj }}</td>

              </tr>
              <tr>
                <td>生殖毒性备注</td>
                <td>{{ element.jkwhbSzdxbz }}</td>

              </tr>
              <tr>
                <td>神经毒性</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>

              </tr>
              <tr>
                <td>皮肤致敏</td>
                <td>{{ element.jkwhbPfzm }}</td>

              </tr>
              <tr>
                <td>呼吸致敏</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>

              </tr>
              <tr>
                <td>腐蚀/刺激性</td>
                <td>{{ element.jkwhFsEndpointconclusionEye }}</td>

              </tr>
              <tr>
                <td>流行病学信息</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>

              </tr>
              <tr>
                <td>其他毒理学信息</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>

              </tr>
              <tr>
                <td>健康毒代动力学</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>

              </tr>
              <tr>
                <td>健康危害信息备注</td>
                <td>{{ element.hjxwGjbsqSoilKeyValue }}</td>

              </tr>

            </table>
          </el-container>
        </el-scrollbar>
        <!-- <div class="content" id="he_ha_info">
          <table>
            <tr>
              <th>致癌性</th>
              <th>致突变性</th>
              <th>内分泌干扰性</th>
              <th>生殖/发育毒性</th>
              <th>胆碱酯酶抑制</th>
              <th>神经毒性</th>
            </tr>
            <tr>
              <td id="carcinogen"></td>
              <td id="mutagen"></td>
              <td id="endocrineDistrupter"></td>
              <td id="reproductionOrDevelopmentEffects"></td>
              <td id="acetylCholinesteraseInhibitor"></td>
            </tr>
            <tr>
              <th>呼吸道刺激性</th>
              <th>皮肤刺激性</th>
              <th>皮肤致敏性</th>
              <th>眼刺激性</th>
              <th>光毒性</th>
            </tr>
            <tr>
              <td id="neurotoxicant"></td>
              <td id="respiratoryTractIrritant"></td>
              <td id="skinSensitiser"></td>
              <td id="skinIrritant"></td>
              <td id="eyeIrritant"></td>
              <td id="phototoxicant"></td>
            </tr>
            <tr>
              <td>人体健康危害</td>
              <td id="generalHumanHealthIssues"></td>
            </tr>
          </table>
        </div> -->
      </div>
    </el-tab-pane>
    <el-tab-pane label="行业信息表" name="hyxxb">
      <el-scrollbar style="height:100%;">
        <el-container class="elementDetail">
          <table>
            <tr>
              <th>参数</th>
              <th>值</th>
            </tr>

            <tr>
              <td>主要用途描述</td>
              <td>{{ element.hyxxbZyytms }}</td>
            </tr>
            <tr>
              <td>行业生产量</td>
              <td>{{ element.hyxxbXyscl }}</td>
            </tr>
            <tr>
              <td>行业使用量</td>
              <td>{{ element.hyxxbXysyl }}</td>
            </tr>
            <tr>
              <td>行业功能（多个）</td>
              <td>{{ element.hyxxbXygnDg }}</td>
            </tr>
            <tr>
              <td>行业应用领域</td>
              <td>{{ element.hyxxbXyyyly }}</td>
            </tr>
            <tr>
              <td>行业生产工艺描述</td>
              <td>{{ element.hyxxbXyscgyms }}</td>
            </tr>
            <tr>
              <td>行业使用工艺描述</td>
              <td>{{ element.hyxxbXysygyms }}</td>
            </tr>
            <tr>
              <td>生产使用备注</td>
              <td>{{ element.hyxxbScsybz }}</td>
            </tr>
            <tr>
              <td>排放系数（大气）</td>
              <td>{{ element.hyxxbPfxsDq }}</td>
            </tr>
            <tr>
              <td>排放系数（水）</td>
              <td>{{ element.hyxxbPfxsS }}</td>
            </tr>

          </table>
        </el-container>
      </el-scrollbar>
    </el-tab-pane>
  </el-tabs>

</template>

<script>
export default {
  name: 'ElemenDetail',
  props: {
    elementId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeName: 'bsxxb',
      element: {}
    }
  },
  watch: {
    elementId(value) {
      console.log(value)
      this.queryElement()
    }
  },
  mounted() {
    this.queryElement()
    console.log('elementID:' + this.elementId)
  },
  methods: {
    queryElement: function() {
      this.$api.element.findById(this.elementId).then(res => {
        this.element = res.data
      })
    }
  }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  body {
    background-color: #efeff4;
  }

  p {
    text-indent: 22px;
  }

  span.mui-icon {
    font-size: 14px;
    color: #007aff;
    margin-left: -15px;
    padding-right: 10px;
  }

  .mui-off-canvas-right {
    color: #fff;
  }

  .title {
    padding: 10px 2px;
    background-color: #007aff;
    color: #fff;
    text-indent: 1em;
    font-size: 14px;
    font-weight: bold;
    line-height: 24px;
  }

  .mui-scroll h4 {
    width: 100%;
    float: left;
    font-family: "微软雅黑";
    font-weight: 500;
    padding-left: 3%;
    background-color: rgba(200, 200, 200, 0.3);
    padding: 10px;
    color: #242424;
  }

  .content {
    width: 100%;
    padding: 5px;
    height: auto;
  }

  input {
    color: #000;
  }

  table {
    width: 100%;
  }

  th {
    font-size: 14px;
    font-weight: 500;
    /*border-right: 1px solid;

				border-bottom: 1px solid;*/
    border: 1px solid #409EFF;
    background-color: lavender;
  }

  td {
    font-size: 12px;
    border: 1px solid #409EFF;
  }

  body .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .elementDetail {
    height: 500px;
  }

</style>
